<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>IP</title>
	<style>
		body{
			color:#456371;
			font-family: "Trebuchet MS", Helvetica, sans-serif;
		}
		::selection{
			background-color:#456371;
			color:white;
		}
		hr {
			border: none;
			border-top: 1px dashed #e7eff3;
		}
		table{
		    margin: auto;
			border-collapse:collapse;
		    max-width:98%;
		}
		caption{
			caption-side:bottom;
			font-size: x-small;
			font-family: "Comic Sans MS", cursive, sans-serif;
			transform: scale(0.8);
		}
		th.ip{
			font-family: cursive;
			font-size: 2rem;
		}
		tbody,tfoot,td{
			border:1px solid #e7eff3;
		}
		tbody td{
			width:50%;
			padding:1ex 2ex;
		}
		tbody td:nth-child(odd){
			text-align:right;
		}
		tbody td:nth-child(even){
			text-align:left;
		}
		tfoot td{
			text-align:center;
			padding:1ex 2ex;
		}	
		td a{
			text-decoration:none;
			color: #9fb8c3;
			transition:all 0.5s;
		}
		td a:hover{
			color:#456371;
		}		
	</style>
</head>

<body>
	<table id="show">
	</table>
	<script>
		function handle(data){
			var str = "";
			str += "<caption>YOUR IP INFO</caption>";
			str += "<thead><tr><th colspan='2' class='ip'>" + data.ip + "</th></tr>";
			str += "<tr><th colspan='2'><hr /></th></tr></thead>";
			str += "<tbody>";
			str += '<tr><td>IP:</td><td id="ip">' + data.ip + '</td></tr>';
			str += '<tr><td>Hostname:</td><td id="hostname">' + data.hostname + '</td></tr>';
			str += '<tr><td>City:</td><td id="city">' + data.city + ',' + data.region+ ',' + data.country + '</td></tr>';
			str += '<tr><td>Latitude/Longitude:</td><td id="loc">' + data.loc + '</td></tr>';
			str += '<tr><td>Organization:</td><td id="org"><a href="https://ipinfo.io/' + data["org"].substring(0,data["org"].indexOf(" ")) +'">' + data.org + '</a></td></tr>';
			str += "</tbody>";
			str += "<tfoot><tr><td colspan='2'>";
			str += "Powered By <a href='https://ipinfo.io/'>ipinfo.io</a>";
			str += "</td></tr></tfoot>";
			document.querySelector("#show").innerHTML += str;
			console.log(JSON.stringify(data));
		}
	</script>
	<script src="https://ipinfo.io/?callback=handle"></script>

</body>
</html>
